<template>
  <!-- 商品详情购物页面 都是用的vant写好的组件 -->
  <div class="product-detail-shopping">
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="isSignIn"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import Vue from "vue";
import {
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Sku,
  Dialog,
  Toast
} from "vant";

Vue.use(GoodsAction)
  .use(GoodsActionIcon)
  .use(GoodsActionButton)
  .use(Sku)
  .use(Dialog)
  .use(Toast);

import {cartCount} from '@/api'
export default {
  props:['list','imgs'],
  data() {
    return {
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: "", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "", // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "蓝色",
                imgUrl: "",
                previewImgUrl: "",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: '',
      },
      goodsId: 2261,
    };
  },
  methods: {
    isSignIn() {
      // 未登录状态
      if (!this.$store.getters.getIsLogin) {
        Dialog.alert({
          closeOnClickOverlay: true,
          title: "未登录",
          message: "请先登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            console.log("取消登录");
          });
      }else{
        // 登录状态可以展示购物车窗口
        this.show = !this.show
        this.packageData()
      }
    },
    // 购买
    onBuyClicked() {
       console.log('购买');
    },
    // 添加购物车
    onAddCartClicked(value){
      const params = {
        productId:value.goodsId,
        count:value.selectedNum
      }
      cartCount(params,(res)=>{
        // 添加成功跳到购物车页面
        if(res.status === 0){
          this.$router.push('/shopcart')
        }else{
          // 添加失败轻提示
          Toast.fail('添加失败');
        }
      })
    },
    packageData(){
      // 商品基本类型
      this.goods.picture = this.list.imageHost + this.list.mainImage
      this.sku.price = this.list.price
      this.sku.stock_num = Number(this.list.stock)
      this.goodsId = this.list.id

      // 商品规格 图片
      let skuV = this.sku.tree[0].v
      let imgH = this.list.imageHost
      skuV[0].imgUrl = imgH + this.imgs[0]
      skuV[0].previewImgUrl = imgH + this.imgs[0]
      skuV[1].imgUrl = imgH + this.imgs[1]
      skuV[1].previewImgUrl = imgH + this.imgs[1]

      // 商品信息 id 价格 库存
      let skuL = this.sku.list
      skuL[0].id = this.list.id
      skuL[0].price = this.list.price * 100
      skuL[0].stock_num = Math.floor(this.list.stock/2)
      skuL[1].id = this.list.id
      skuL[1].price = this.list.price * 100
      skuL[1].stock_num = Math.ceil(this.list.stock/2)
    }
  },
};
</script>

<style lang="scss" scoped>
.product-detail-shopping {
  width: 100%;
}
</style>